<template>
  <div :id="dyid" style="width: 800px; height: 420px;padding:10px"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    datas: Object,
    dyid:String,
    title:String
  },
  data() {
    return {
      option: Object,
      charts: "",
      lmax:100,
      lmin:0
    };
  },
  mounted() {
    
    this.option = {
      title:{text:this.title},
      xAxis: {
        type: "category",
        data: this.datas.x,
      },
      yAxis: {
        type: "value",
        min:this.lmin,
        max:this.lmax,
      },
      series: [
        {
          markLine: {
            symbol: ["none", "none"],
            label: {
              formatter: "{b}",
              show: true,
            },
            data: this.datas.fuzhu
          },
          data: this.datas.y,
          type: "line",
        },
      ],
    };
    this.charts=echarts.init(document.getElementById(this.dyid))
    this.charts.setOption(this.option)
  },
  watch:{
      datas:{
          handler(nd){
              this.option.xAxis.data=nd.x
              this.option.series[0].markLine.data=nd.fuzhu
              this.option.series[0].data=nd.y
              var tmax=parseInt(Math.max.apply(null,nd.y))
              var tmin=parseInt(Math.min.apply(null,nd.y))
              var llmin=parseInt((nd.fuzhu)[2].yAxis)-500
              var llmax=parseInt((nd.fuzhu)[0].yAxis)+500

              console.log(tmax)
              this.lmin=(tmin<=llmin)?(tmin-500):llmin
              this.lmax=(tmax>=llmax)?(tmax+500):llmax      
              this.option.yAxis.min=this.lmin
              this.option.yAxis.max=this.lmax
              this.charts.setOption(this.option)
          },
          deep:true
      }
  }
};
</script>

<style>
</style>